<template>
  <div class="login-container">
    <!-- 文库吧标题title -->
    <div class="login-box">
      <div class="login-title">
        <p class="iconfont icon-wenkuba"></p>
      </div>
      <div class="login-title-bottom"></div>
    </div>

    <!-- 登录 -->
    <div class="login-up">
      <el-form :model="LoginForm" :rules="LoginRules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="LoginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="LoginForm.password"
            @keyup.enter.native="submitForm('ruleForm')"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-row :gutter="20" class="loginCap">
            <el-col :span="14">
              <el-input v-model="LoginForm.captcha" placeholder="验证码"></el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <div>
                <img :src="captchaPath" @click="getCaptcha()" alt />
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="login-pwd">
          <label>
            <el-checkbox class="needsclick" v-model="checked">记住密码</el-checkbox>
          </label>

          <p class="needsclick2">购买地址：<a :href="gourl" @click="goTaobao()" class="alink" target="_blank">
              点击进入</a>
          </p>

        </div>
        <el-button type="button" class="mui-btn-block lgoin-btn" @click="login()">立即登录</el-button>
      </el-form>
    </div>
    <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
  </div>

</template>
<script>
  import {
    Toast
  } from "mint-ui";
  export default {
    data() {
      return {
        checked: true,
        LoginForm: {
          username: "",
          password: "",
          uuid: "",
          captcha: "",
          anShopUrl: '',
          titleMessage: '',
          myUrl: '',
          wenkuxiaUrl: ''
        },
        gourl: '',
        captchaPath: '',
        LoginRules: {
          username: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],
          captcha: [{
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }]
        }
      };
    },
    components: {

      'remote-js': {
        render(createElement) {
          return createElement('script', {
            attrs: {
              type: 'text/javascript',
              src: this.src
            }
          });
        },
        props: {
          src: {
            type: String,
            required: true
          },
        },
      },
    },
    created() {
      this.getCaptcha();
      this.getDetails();
    },
    mounted() {
      this.getlocalStorage();
      this.checked = true;
    },
    methods: {
      getDetails() {
        this.$http({
          url: this.$http.adornUrl('/app/getMessageInfo'),
          method: 'post',
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {

            this.LoginForm.anShopUrl = data.anShopUrl
            this.LoginForm.wenkuxiaUrl = data.wenkuxiaUrl;
            this.LoginForm.titleMessage = data.titleMessage;
            this.LoginForm.myUrl = data.myUrl;
          }
        }).catch((error) => {

        });
      },
      login() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$indicator.open();
            this.$http({
                url: this.$http.adornUrl("/app/cardsLogin"),
                method: "post",
                data: this.$http.adornData({
                  cdkcard: this.LoginForm.username,
                  password: this.LoginForm.password,
                  uuid: this.LoginForm.uuid,
                  captcha: this.LoginForm.captcha
                })
              })
              .then(({
                data
              }) => {
                if (data && data.code === 0) {
                  Toast("登陆成功！");
                  this.$indicator.close();
                  this.$cookie.set("token", data.token);
                  if (this.checked === true) {
                    this.setlocalStorage(
                      this.LoginForm.username,
                      this.LoginForm.password,
                      this.checked
                    );
                  } else {
                    this.clearlocaStorage();
                  }
                  // 跳转home
                  this.$router.push("/home");
                } else {
                  this.getCaptcha();
                   this.$indicator.close();
                   Toast(data.msg);
                 
                }
              })
              .catch(error => {
                this.getCaptcha()
               
                this.$indicator.close();
                Toast("登录失败，请重试");
              });
          }
        });
      },
      getCaptcha() {

        this.LoginForm.uuid = this.getUUID();
        this.captchaPath = this.$http.adornUrl(
          `/app/captcha.jpg?uuid=${this.LoginForm.uuid}`
        );
      },
      getUUID() {
        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
          return (c === "x" ?
            (Math.random() * 16) | 0 :
            "r&0x3" | "0x8"
          ).toString(16);
        });
      },
      // 存储账号密码
      // 存储账号密码
      setlocalStorage(c_name, c_pwd, check) {
        window.localStorage.setItem("username", c_name);
        window.localStorage.setItem("password", c_pwd);
        window.localStorage.setItem("checked", check);
      },
      // 获取账号密码
      getlocalStorage() {
        this.LoginForm.username = localStorage.getItem("username"); //保存到保存数据的地方
        this.LoginForm.password = localStorage.getItem("password");
        this.checked = Boolean(localStorage.getItem("checked"));
      },
      // 清除账号密码
      clearlocaStorage() {
        this.setlocalStorage("", "", "");
      },
      getRandomInt: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      },
      goTaobao() {


        var cname = returnCitySN['cname'];
        //默认的淘宝地址
        var defalutUrl =
          'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911debSaAzUa&ft=t&id=605148708976';
        if (cname.indexOf("广州") >= 0) {
          if (this.LoginForm.anShopUrl !== undefined && this.LoginForm.anShopUrl !== '') {
            this.gourl = this.LoginForm.anShopUrl
          } else {
            this.gourl = defalutUrl;
          }

        } else if (cname.indexOf("湖南") >= 0) {
          if (this.LoginForm.anShopUrl !== undefined && this.LoginForm.anShopUrl !== '') {
            this.gourl = this.LoginForm.anShopUrl
          } else {
            this.gourl = defalutUrl;
          }
        } else {

          if (this.LoginForm.myUrl !== undefined && this.LoginForm.myUrl !== '') {
      
            var random = this.getRandomInt(1, 100)
            if (random % 2 == 0) {
              this.gourl = this.LoginForm.myUrl
            } else {
              this.gourl = this.LoginForm.wenkuxiaUrl;
            }
          } else {
            this.gourl = this.LoginForm.wenkuxiaUrl
          }

        }

      },
    }
  };

</script>

<style lang="less">
  .login-container {
    width: 280px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;

    .login-box {
      margin-top: 108px;

      .login-title {
        width: 280px;
        height: 105px;
        border: 2px solid white;
        border-bottom: none;
        text-align: center;

        p {
          font-size: 44px;
          color: white;
          letter-spacing: 4px;
          margin: 0px;
          line-height: 105px;
        }


        &::after {
          width: 320px;
          content: "一 输入文档链接地址即可快速下载文档 一";
          display: block;
          color: white;
          font-size: 14px;
          letter-spacing: 2px;
          text-align: center;
          margin-left: -20px;
          line-height: 21px;
        }
      }

      .login-title-bottom {
        width: 280px;
        height: 28px;
        border: 2px solid white;
        margin-top: 21px;
        border-top: none;
      }
    }

    .needsclick2 {
      font-size: 14px;
      color: #409EFF;
    }

    .login-up {
      // text-align: center;
      margin-top: 33px;

      form {
        input {
          width: 280px;
          height: 36px;
          padding-left: 20px;
          border-radius: 2px;
          letter-spacing: 2px;
          color: #ffffff;
          background: rgba(255, 255, 255, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.8);
          box-sizing: border-box;
          outline: none;
          font-size: 12px;

          &::-webkit-input-placeholder {
            font-size: 12px;
            color: #ffffff;
          }

          &:focus {
            border-style: solid;
            border-color: skyblue;
            box-shadow: 0 0 15px skyblue;
          }
        }

        .login-pwd {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
          letter-spacing: 0;
          line-height: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          // input {
          //   margin: 0px;
          //   width: 12px;
          //   height: 12px;
          //   margin-right: 5px;
          //   border-radius: 2px;
          // }
        }

        .alink {
          color: red;
          letter-spacing: 1px;
          text-decoration: underline;
        }

        .loginCap {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .loginCap input {
          width: 100%;
        }

        .login-captcha div {
          width: 100%;
          height: 100%;
        }

        .login-captcha div img {
          width: 100%;
          height: 100%;
          display: block;
          cursor: pointer;
          z-index: 99;
        }

        .mui-btn-block {
          padding: 0px;
          font-size: 12px;
          color: #16c79d;
          letter-spacing: 4px;
          text-align: center;
        }

        .lgoin-btn {
          margin-top: 36px;
          width: 280px;
          height: 36px;
          text-align: center;
        }
      }
    }
  }

</style>
